<template>
	<view class="container-flex-auto">
		<u-sticky bg-color="#fff">
			<view style="width: 100%;">
				<u-navbar :title="pageTitle" :placeholder="true" :fixed="true" bg-color="#fff"
					title-style="font-size: 18px;font-weight: bolder;">
					<view slot="left"></view>
				</u-navbar>
			</view>
		</u-sticky>
		
		<template v-if="loadingSuccess">

			<!-- 历史观看 -->
			<template v-if="!isAudit && Object.keys(lastHistoryData).length > 0">
				<view class="history-nav">
					<p class="font-28 font-color">{{lastHistoryData.video_title}} 第{{ lastHistoryData.episode }}集</p>
					<view class="main-btn">
						<u-button text="继续观看" type="primary" shape="circle" @click="handleContinue()">
						</u-button>
					</view>
				</view>
			</template>

			<template v-if="!isAudit && weekVideoList.length > 0">
				<!-- 本周精选 -->
				<view class="mt-24">
					<TantanCard ref="tantanCardRef" :list="weekVideoList"></TantanCard>
				</view>

				<view class="symbol-nav">
					<image src="/static/images/page-index-prev.png" @click="handlePrev()"></image>
					<image src="/static/images/page-index-next.png" @click="handleNext()"></image>
					<image src="/static/images/page-index-player.png" @click="handlePlayerVideo()"></image>
				</view>
			</template>

			<!-- 审核模式下的列表 -->
			<template v-if="isAudit">
				<ShenheStateIndexBeautiful />
			</template>

		</template>

	</view>
</template>

<script>
import colorMixins from '@/mixins/colorMixins.js'
import VideoList from '@/components/video-list/video-list.vue'
import LikeVideo from '@/components/like-video/like-video.vue'
import IndexHistoryModal from '@/components/index-history-modal/index-history-modal.vue'
import ShenheStateIndexBeautiful from '@/components/shenhe-state-index-beautiful/shenhe-state-index-beautiful.vue'
import TantanCard from '@/components/tantan-card/tantan-card.vue'
import {
  queryBannerList,
  queryAbility,
  queryGuessList,
  queryHistoryList,
  queryFeaturedList
} from '@/api/index.js'
import storage from '@/utils/storage.js'
import { ACCESS_TOKEN } from '@/store/mutation-types.js'


export default {
  mixins: [colorMixins],
  components: {
    VideoList,
    LikeVideo,
    IndexHistoryModal,
    ShenheStateIndexBeautiful,
    TantanCard
  },
  data() {
    return {
      loadingSuccess: false,
      swiperList: [],
      weekVideoList: [],
      videoList: [],
      lastHistoryData: {}
    }
  },
  computed: {
    pageTitle() {
      return this.$store.state.appConfig.name || '首页'
    },
    // true审核模式
    isAudit() {
      return this.$store.state.appConfig.is_ad == 1
    }
  },
  async onLoad(options) {
    // this.$modal.loading('数据加载中...')
    const { path } = options

    await this.getLoginCode()
    await this.init()
    setTimeout(()=> {
      // 因为computed的isAudit代码执行需要一点点时间，避免页面出现闪烁
      this.loadingSuccess = true
    }, 100)
  },
  onShow() {
    const token = storage.get(ACCESS_TOKEN)
    if (token) {
      this.queryHistoryListFn()
    }
  },
  methods: {
    // 登录
    getLoginCode() {
      return new Promise(resolve => {
        // #ifdef MP-WEIXIN
        uni.login({
          provider: 'weixin',
          success: res => {
            const { code } = res
            // 在store/user.js执行登录请求
            this.$store.dispatch('Login', code).then(res => {
              // 获取小程序配置
              this.$store.dispatch('SetAppConfig')
              resolve(res)
            })
          }
        })
        // #endif

        // #ifdef APP-PLUS
        this.$store.dispatch('Login').then(res => {
          resolve(res)
        })
        // #endif
      })
    },

    async init() {
      this.queryBannerListFn()
      this.queryWeekVideoList()
      this.queryGuessListFn()
      this.queryHistoryListFn()
    },

    // 查轮播图
    async queryBannerListFn() {
      const { list } = await queryBannerList()
      const arr = list.map(e => {
        return {
          ...e,
          images: e.oss_object.url
        }
      })
      this.swiperList = arr
    },


    // 本周精选分类数据
    async queryWeekVideoList() {
      const { list } = await queryFeaturedList()
      this.weekVideoList = list
    },

    // 猜你爱看数据
    async queryGuessListFn() {
      const { list } = await queryGuessList()
      this.videoList = list
    },

    // 查最后一次观看记录
    async queryHistoryListFn() {
      const { data } = await queryHistoryList({ pageNum: 1 })
      this.lastHistoryData = data[0]
    },

    handleContinue() {
      const { video_id } = this.lastHistoryData
      uni.navigateTo({ url: `/pages/player/player?library_id=${video_id}` })
    },

    handlePrev() {
      this.$refs.tantanCardRef.onPrev()
    },

    handleNext() {
      this.$refs.tantanCardRef.onNext()
    },

    handlePlayerVideo() {
      this.$refs.tantanCardRef.onClick()
    },

  }
}
</script>

<style lang="scss" scoped>
	::v-deep .swiper-cards {
		height: 100%;
	}

	.history-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-image: linear-gradient(to right, #F7FAD6, #D6FEFC);
	}

	.main-btn {
		width: 160rpx;

		/deep/ .u-button {
			background-image: linear-gradient(to right, $linear-gradient-l, $linear-gradient-r);
			border: none !important;
			font-size: 28rpx !important;
			height: 52rpx !important;
			padding: 0 !important;
		}
	}

	.symbol-nav {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 96rpx;

		image {
			width: 132rpx;
			height: 132rpx;
		}
	}
</style>
